Creating an HTML Form

In the previous chapters, you learned about creating a Web page using HTML that helps in displaying information to the user. HTML is also used to create forms on the Web page that gather information from the user. A form is the primary element of a Web page. The basic purpose of an HTML form is to allow the user to enter data on one end and then send the data on the other end through the Web server. An HTML form consists of various controls such as text boxes, radio buttons, and check boxes. The user fills in the form by entering data in the text boxes, clicking the radio button, and check boxes, there is also a submit button which helps the user in sending the data to the server. A form helps the user in signing up for a newsletter, signing up for a mail account, and purchasing goods on the internet.

Let’s first start with creating an HTML form:

The HTML script for creating a form has three important parts: the <form> tag, which includes the Uniform Resource Locator (URL) of the script that will process the form; the form elements, such as text fields, and the submit button, which sends the data to the server. In HTML form, you also place input elements such as datalist and select, which should be enclosed within the opening and closing <form> tag. Below given lists a brief description of the attributes of the <form> tag.

Attributes of the <form> tag.

Attribute

Value

Description

action

URL

Contains a URL that defines where to send the data after submitting the form.

method

get

set

put

delete

Specifies how to send the form data to a Web server. The data can be sent as URL variables, by using the get method or as HTTP post, by using the post method. The default method is get.

autocomplete

on

off

Determines that the browser retains the history of previous values.

novalidate

true

false

Defines a Boolean value for this attribute. In this, the form should not be validated when the SUBMIT button is clicked.

Let’s do the following steps to create an HTML form:


<!DOCTYPE html>
<head>
    <title> Creating HTML Form</title>
</head>
<body>
    <form>
        First Name:
        <input type=”text” name=”firstname” /><br>
        Last Name:
        <input type=”text” name=”lastname” /><br>
        <input type=”submit” value=”Submit”  />
    </form>
    <p> If you click the <b> <u>”Submit” </u></b> button you will be redirected to the Example.html page. </p>

</body>
</html> 

Save the document with the name CreatingaForm.html and open on browser.